<template>
  <WidgetEditFormContainer v-model="innerDialogShow" :inline="inline">
    <q-card class="q-pa-lg" style="min-width: 480px">
      <h6 class="text-h6 q-my-md">消息通道配置</h6>
      <template v-if="channels.length>0">
        <q-select
            v-model="selectedChannels"
            :options="channels"
            multiple
            use-input
            use-chips
            input-debounce="0"
            label="消息通道">
          <template v-slot:prepend>
            <q-icon name="message"/>
          </template>
        </q-select>
      </template>
      <template v-else>
        <div class="q-pa-md">
          <span>当前未配置任何消息通道 🛴 </span>
          <q-btn color="primary" flat @click="goMsg">点击前往添加通道</q-btn>
        </div>
      </template>

      <q-card-section class="text-right">
        <q-btn class="q-ml-md" @click="innerDialogShow = false">取 消</q-btn>
        <q-btn class="q-ml-md" type="primary" @click="submitChannels()">确 定</q-btn>
      </q-card-section>
    </q-card>
  </WidgetEditFormContainer>
</template>

<script>
import form from '../../../../mixins/form'
import { cloneDeep } from 'lodash'
import WidgetEditFormContainer from '../../components/WidgetEditFormContainer'
import iMessage from '../../../../api/msg/msg'

const defaultForm = {
  webhookUrl: '',
  accessToken: '',
  secret: '',
  feishuWebhookUrl: ''
}

export default {
  name: 'MessageRobotEditForm',
  components: {
    WidgetEditFormContainer
  },
  mixins: [form],
  data () {
    return {
      formData: this.value || cloneDeep(defaultForm),
      channels: [],
      selectedChannels: null
    }
  },
  async mounted () {
    const channels = await iMessage.getList()
    this.channels = channels.map(e => {
      return {
        label: e.name,
        value: e._id,
        description: e.description,
        category: e.platform
      }
    })
    this.selectedChannels = this.channels.filter(e => this.formData.find(j => j === e.value))
  },
  methods: {
    async submitChannels () {
      this.formData = this.selectedChannels.map(e => e.value)
      this.submit()
    },
    goMsg () {
      this.$router.push({ name: 'Message' })
    }
  }
}
</script>

<style scoped>

</style>
